<template>
	<view class="page w-full h-100vh bg-fffbf4">
		<view class="page-top-bg w-full z-0"></view>
		<z-paging-swiper>
			<template #top>
				<view class="relative w-full pt-60 pl-60 pr-60 flex justify-around align-items-center">
					<view class="tab-item" :class="[current === index? 'active-tab-item' : '']"
						v-for="(item,index) in tabList" :key="index" @click="tabsChange(index)">
						{{ item }}
					</view>

					<image src="@/static/icon-16.png" class="back-icon absolute l-20" @click="$goBack()"></image>
				</view>
			</template>
			<swiper class="swiper" :current="current" @animationfinish="swiperAnimationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
					<swiper-list-item ref="listItem" :tabIndex="index" :currentIndex="current"></swiper-list-item>
				</swiper-item>
			</swiper>
		</z-paging-swiper>
	</view>

</template>

<script setup>
	import swiperListItem from "./swiper-list-item.vue";

	const listItem = ref(null);
	const tabList = ref(["家风家训", "名人堂", "历史资料"]);
	const current = ref(0);

	// tabs通知swiper切换
	const tabsChange = (index) => {
		current.value = index;
	};

	// 如果要通知当前展示的z-paging刷新，请调用此方法
	const reloadCurrentList = () => {
		listItem.value[current.value].reload();
	};

	// swiper滑动结束
	const swiperAnimationfinish = (e) => {
		current.value = e.detail.current;
	};
</script>

<style scoped>
	.swiper {
		height: 100%;
	}

	.page-top-bg {
		position: fixed;
		top: 0;
		height: 600rpx;
		background-image: url('/src/static/bg-05.png');
		background-size: 100% 100%;
	}

	.tab-item {
		width: fit-content;
		color: #A4907D;
		font-size: 28rpx;
		font-weight: 400;
	}

	.active-tab-item {
		color: #592E22;
		font-size: 32rpx;
		font-weight: 700;
		position: relative;
	}

	.active-tab-item::after {
		content: '';
		position: absolute;
		left: 0rpx;
		bottom: 0;
		width: 100%;
		height: 16rpx;
		background: linear-gradient(90deg, rgba(222, 173, 127, 0) 0%, #DEAD7F 100%);
		border-radius: 632rpx 632rpx 632rpx 632rpx;
		z-index: -1;
	}

	.back-icon {
		width: 56rpx;
		height: 56rpx;
	}
</style>